<template>
	<view>
		<Navbar :isReturn="true"></Navbar>
		<view class="u-m-30 u-position-relative">
			<swiper class="swiper_box" :circular="true" :current="swiperCurrent" @change="swiperChange">
				<swiper-item v-for="(item,index) in bannerList" :key="item.id">
					<u-image width="100%" height="350rpx" border-radius="20" mode="aspectFit" :src="item.url"
						@click="openSwiper(index)"></u-image>
				</swiper-item>
			</swiper>
			<view class="swiper_type_box">
				<view class="swiper_type" :class="item.check ? 'check' : ''" v-for="item in bannerTypeList"
					:key="item.name" @click="clickSwiper(item)">{{item.name}}</view>
			</view>
		</view>
		<view class="u-m-30">
			<view class="u-card-box u-p-l-15 u-p-r-15 u-m-t-20">
				<view class="u-p-l-10 u-width-100">
					<view class="u-font-34 u-font-bold">{{addressInfo.address_name}}</view>
					<view class="u-m-t-10 u-font-28">{{addressInfo.address}}{{addressInfo.doorplate}}</view>
					<view class="u-font-28">
						<span class="u-color-gray">负责人：</span>
						<span>{{addressInfo.supply_info.name}}</span>
						<span class="u-m-l-10">{{addressInfo.supply_info.phone}}</span>
					</view>
				</view>
				<view class="u-m-t-20 u-p-l-15 u-p-r-15 u-p-t-10 u-p-b-10 u-flex" :class="addressInfo.typeClass"
					v-if="!(addressInfo.is_temp == 0 && addressInfo.status == 0)">
					<view class="typeTitle">{{addressInfo.tempName}}</view>
					<view class="u-m-l-10 u-font-26">{{addressInfo.tempTime}}</view>
				</view>
			</view>
		</view>
		
		<view class="u-m-30 u-font-bold u-font-40">酒局：</view>
		<view class="u-m-t-40 u-m-l-30 u-m-r-30" v-for="(item,index) in teaList" :key="item.id">
			<view class="u-card-box">
				<view class="u-flex u-col-top" @click="goTeaDetail(item.id)">
					<view>
						<view class="tea_left_ava">
							<u-image width="160rpx" height="160rpx" border-radius="20" :src="item.user.head_img"></u-image>
						</view>
						<view class="u-text-center u-font-24 u-m-t-15 number_box">
							<view class="u-font-bold u-font-26">{{item.number}}</view>
							<view class="u-font-23 u-m-l-10">能量值</view>
						</view>
					</view>
					<view class="u-m-l-20 u-font-desc u-flex-1">
						<view class="u-flex">
							<view class="tea_right_tag">{{item.theme_name}}</view>
							<view class="tea_right_role u-m-l-10" v-if="item.is_top == 1">推荐酒局</view>
						</view>
						<view class="u-m-t-10">
							<span class="u-color-gray">时间：</span>
							<span class="">{{ item.starting_time }}</span>
						</view>
						<view class="u-m-t-10 u-flex">
							<view>
								<span class="u-color-gray">青创私董：</span>
								<span>{{item.user.name}}</span>
							</view>
						</view>
						<view class="u-m-t-10">
							<span class="u-color-gray">费用：</span>
							<span class="u-color-red">{{item.pay_name}}</span>
						</view>
						<view class="u-m-t-10 u-flex u-flex-wrap" v-if="item.label[0]">
							<view class="u-color-green u-m-r-10" v-for="(labelItem,labelIndex) in item.label" :key="labelIndex">#{{labelItem}}</view>
						</view>
						<view class="u-border-top u-m-t-20 u-p-t-15 u-flex u-row-between">
							<view class="u-flex">
								<u-icon name="eye-fill" size="32" color="#808080"></u-icon>
								<view class="u-m-l-5 u-font-26 u-color-gray">{{item.view_number}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<Loadmore :status="loadStatus"></Loadmore>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import Loadmore from '@/components/Loadmore.vue'
	import reachBottom from '@/mixins/reachBottom.js'
	import { generateUUID, formatDate } from '@/utils/index.js'
	import { teaAddressDetail, teaAddressInfoNews } from '@/network/tea.js'
	export default {
		mixins: [reachBottom],
		components:{
			Navbar,
			Loadmore
		},
		data(){
			return{
				addressInfo:{},
				address_id: 0,
				bannerList: [],
				bannerTypeList: [{
					name: '大楼外观',
					type: 'build',
					check: true
				}, {
					name: '场地门头',
					type: 'head',
					check: false
				}, {
					name: '酒局环境',
					type: 'images',
					check: false
				}],
				swiperCurrent: 0,
				teaList: [],
				loadStatus: 'loadmore',
			}
		},
		onLoad(options){
			this.address_id = options.id
			this.onGetAddressInfo(options.id)
			this.onGetAddressTea()
		},
		methods:{
			async onGetAddressInfo(id){
				const res = await teaAddressDetail({address_id: id})
				if (res.data.info.is_temp == 1) {
					res.data.info.tempTime = `${res.data.info.start_time.slice(0,10)}`
					res.data.info.tempName = '临时'
					res.data.info.typeClass = 'fail_type'
				} else {
					res.data.info.tempName = '签约'
					res.data.info.tempTime =
						`${res.data.info.start_time.slice(0,10)} —— ${res.data.info.end_time.slice(0,10)}`
					res.data.info.typeClass = 'success_type'
				}
				this.addressInfo = res.data.info
				this.dealSwiperBanner(res.data.info.building_images, 'build')
				this.dealSwiperBanner(res.data.info.head_images, 'head')
				this.dealSwiperBanner(res.data.info.images, 'images')
			},
			async onGetAddressTea(){
				const params = {
					address_id: this.address_id,
					page: this.page,
					limit: this.pageSize
				}
				const res = await teaAddressInfoNews(params)
				if(res.data.list.length > 0){
					res.data.list.map(item=>{
						switch(item.pay_type){
							case "1":
							case 1:
							    item.pay_name = '免费'
								break;
							case "2":
							case 2:
							    item.pay_name = `${parseInt(item.price)}元`
								break;
							case "3":
							case 3:
							    item.pay_name = `${parseInt(item.price)}积分`
								break;
						}
						if(item.label){
							item.label = item.label.split("#").filter(item=>item !== null && item !== undefined && item)
						}
						item.starting_time = `${item.start_time.slice(0,16)}-${item.end_time.slice(11,16)}`
						this.teaList.push(item)
					})
				}
				if(this.teaList.length == res.data.count) this.loadStatus = 'nomore'
			},
			dealSwiperBanner(list, type) {
				list.map(item => {
					const params = {
						url: item,
						type: type,
						id: generateUUID()
					}
					this.bannerList.push(params)
				})
			},
			swiperChange(val) {
				let index = val.detail.current
				this.bannerTypeList.map(item => {
					if (item.type == this.bannerList[index].type) {
						item.check = true
					} else {
						item.check = false
					}
				})
			},
			openSwiper(index) {
				/* swiper图片预览 */
				let previewList = []
				this.bannerList.map(item => previewList.push(item.url))
				uni.previewImage({
					current: index,
					urls: previewList
				})
			},
			clickSwiper(val) {
				/* swiper模块切换 */
				if (!val.check) {
					for (let i = 0; i < this.bannerList.length; i++) {
						if (this.bannerList[i].type == val.type) {
							this.swiperCurrent = i
							return
						}
					}
					this.bannerTypeList.map(typeItem => typeItem.check = false)
					val.check = true
				}
			},
			goTeaDetail(id){
				uni.navigateTo({
					url: `/teaBureau/teaDetail/teaDetail?id=${id}`
				})
			},
			loadData() {
				if (this.loadStatus == 'nomore') return
				this.page++
				this.loadStatus = 'loading'
				this.onGetAddressTea()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper_box {
		height: 350rpx;
		background: #fff;
		border-radius: 20rpx;
	}
	
	.swiper_type_box {
		position: absolute;
		bottom: 30rpx;
		display: flex;
		left: 40rpx;
		background: #fff;
		border-radius: 30rpx;
		font-size: 25rpx;
	
		.swiper_type {
			padding: 10rpx 20rpx;
		}
	
		.check {
			background-color: #fb6316;
			color: #fff;
			border-radius: 30rpx;
			transition: all 0.3s;
		}
	}
	
	.fail_type {
		background: #EAFAF2;
		border-radius: 10rpx;
	
		.typeTitle {
			background: #25D48B;
			color: #fff;
			font-size: 20rpx;
			font-weight: bold;
			border-radius: 8rpx;
			padding: 6rpx 20rpx;
		}
	}
	
	.success_type {
		background: #FCF0E8;
		border-radius: 10rpx;
	
		.typeTitle {
			background: #FB7B22;
			color: #fff;
			font-size: 20rpx;
			font-weight: bold;
			border-radius: 8rpx;
			padding: 6rpx 20rpx;
		}
	}
	
	.tea_right_tag {
		background: #2C76ED;
		color: #fff;
		border-radius: 10rpx;
		padding: 5rpx 15rpx;
		font-size: 24rpx;
	}
	
	.tea_right_role {
		background: #F96257;
		color: #fff;
		border-radius: 8rpx;
		padding: 5rpx 10rpx;
		font-size: 24rpx;
	}
</style>